<template>
  <view class="container">
    <!-- 用户信息卡片 -->
    <view class="user-card">
      <view class="avatar-wrapper" @click="uploadAvatar">
        <image :src="userInfo.avatar || '/static/default-avatar.png'" class="avatar" mode="aspectFill" />
        <view class="edit-overlay">
          <text class="iconfont icon-camera"></text>
        </view>
      </view>
      <view class="user-info">
        <text class="username">{{ userInfo.nickname || '设置昵称' }}</text>
        <text class="user-id">ID: {{ userInfo.id }}</text>
      </view>
    </view>
    
    <!-- 功能列表 -->
    <view class="menu-list">
      <view class="menu-group">
        <view class="menu-item" @click="navigateToBasicInfo">
          <text class="menu-title">基本信息</text>
          <view class="menu-right">
            <text class="menu-value">{{ userInfo.nickname }}</text>
            <text class="iconfont icon-arrow-right"></text>
          </view>
        </view>
        
        <view class="menu-item" @click="navigateToReminders">
          <text class="menu-title">用药提醒</text>
          <view class="menu-right">
            <text class="menu-value">{{ reminderCount }}个提醒</text>
            <text class="iconfont icon-arrow-right"></text>
          </view>
        </view>
      </view>
      
      <view class="menu-group">
        <view class="menu-item" @click="navigateToSettings">
          <text class="menu-title">通知设置</text>
          <text class="iconfont icon-arrow-right"></text>
        </view>
        
        <view class="menu-item" @click="showAbout">
          <text class="menu-title">关于我们</text>
          <text class="iconfont icon-arrow-right"></text>
        </view>
      </view>
    </view>
    
    <!-- 退出登录按钮 -->
    <button class="logout-button" @click="handleLogout">退出登录</button>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

// 用户信息
const userInfo = ref(userStore.userInfo)

// 提醒数量
const reminderCount = ref(5)

// 获取用户信息
const fetchUserInfo = async () => {
  await userStore.fetchUserInfo()
  userInfo.value = userStore.userInfo
}

// 页面加载时获取用户信息
onMounted(() => {
  fetchUserInfo()
})

// 上传头像
const uploadAvatar = () => {
  uni.chooseImage({
    count: 1,
    success: async (res) => {
      // TODO: 上传头像到服务器
      await userStore.updateUserInfo({ avatar: res.tempFilePaths[0] })
      userInfo.value.avatar = res.tempFilePaths[0]
      uni.showToast({
        title: '头像更新成功',
        icon: 'success'
      })
    }
  })
}

// 导航到基本信息页面
const navigateToBasicInfo = () => {
  uni.navigateTo({
    url: '/pages/profile/basic-info'
  })
}

// 导航到提醒设置页面
const navigateToReminders = () => {
  uni.navigateTo({
    url: '/pages/profile/reminders'
  })
}

// 导航到通知设置页面
const navigateToSettings = () => {
  uni.navigateTo({
    url: '/pages/profile/settings'
  })
}

// 显示关于我们
const showAbout = () => {
  uni.showModal({
    title: '关于我们',
    content: '智慧用药助手 v1.0.0',
    showCancel: false
  })
}

// 退出登录
const handleLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        // 清除用户信息和token
        userStore.clearUserInfo()
        uni.removeStorageSync('token')
        uni.removeStorageSync('userInfo')
        
        // 跳转到登录页
        uni.reLaunch({
          url: '/pages/login/index'
        })
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #f8f8f8;
  padding-top: var(--status-bar-height);
  padding-bottom: var(--window-bottom);
  padding: 40rpx;
}

.user-card {
  background: #ffffff;
  border-radius: 24rpx;
  padding: 40rpx;
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  
  .avatar-wrapper {
    position: relative;
    margin-right: 30rpx;
    
    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
    }
    
    .edit-overlay {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 40rpx;
      height: 40rpx;
      background: #018d71;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .iconfont {
        font-size: 24rpx;
        color: #ffffff;
      }
    }
  }
  
  .user-info {
    flex: 1;
    
    .username {
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
      margin-bottom: 8rpx;
    }
    
    .user-id {
      font-size: 24rpx;
      color: #999999;
    }
  }
}

.menu-list {
  .menu-group {
    background: #ffffff;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
    
    .menu-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30rpx;
      border-bottom: 1rpx solid #f5f5f5;
      
      &:last-child {
        border-bottom: none;
      }
      
      .menu-title {
        font-size: 28rpx;
        color: #333333;
      }
      
      .menu-right {
        display: flex;
        align-items: center;
        
        .menu-value {
          font-size: 28rpx;
          color: #999999;
          margin-right: 20rpx;
        }
        
        .iconfont {
          font-size: 36rpx;
          color: #999999;
        }
      }
    }
  }
}

.logout-button {
  width: 100%;
  height: 88rpx;
  background: #ffffff;
  border-radius: 44rpx;
  font-size: 32rpx;
  color: #f5222d;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 60rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}
</style>